<!--
This Source Code Form is subject to the terms of the Mozilla Public
License, v. 2.0. If a copy of the MPL was not distributed with this
file, You can obtain one at http://mozilla.org/MPL/2.0/.

Copyright (c) 2023-present Kaleidos INC
-->

<ng-container *ngIf="model$ | async as vm">
  <ng-container *transloco="let t">
    <ng-container *ngIf="vm.workspace">
      <div class="wks-main-content-top">
        <h2 class="wks-main-content-title">{{ t('commons.projects') }}</h2>
        <a
          *ngIf="vm.workspace.userRole === 'member'"
          appearance="primary"
          [routerLink]="['/new-project']"
          [queryParams]="{ workspace: vm.workspace.id }"
          data-test="create-project"
          tuiButton>
          {{ t('common_project.create_project') }}
        </a>
      </div>
      <div
        *ngIf="
          (loading$ | async) === false &&
          !vm.workspace.totalProjects &&
          !vm.invitations.length &&
          vm.workspace.hasProjects &&
          vm.workspace.userRole !== 'member' &&
          !vm.creatingWorkspaceDetail
        "
        class="workspace-message-placeholder detail"
        [innerHtml]="t('workspace.placehoder_no_access')"></div>
      <div
        *ngIf="
          (loading$ | async) === false &&
          !vm.workspace.totalProjects &&
          !vm.invitations.length &&
          !vm.workspace.hasProjects &&
          vm.workspace.userRole !== 'member' &&
          !vm.creatingWorkspaceDetail
        "
        class="workspace-message-placeholder detail"
        [innerHtml]="t('workspace.placehoder_no_projects')"></div>
      <div
        [@.disabled]="animationDisabled"
        (resized)="onResized($event)"
        [class]="gridClass"
        class="workspace-item-card-grid">
        <div
          *ngIf="
            vm.projects.length === 0 &&
            vm.workspace.userRole === 'member' &&
            !vm.creatingWorkspaceDetail
          ">
          <tg-project-card
            (projectToDelete)="setProjectToDelete($event)"
            (openModal)="openModal($event)"
            [workspace]="vm.workspace"
            [hasActions]="true"
            variant="placeholder"
            [firstProject]="true">
          </tg-project-card>
        </div>
        <div
          *ngFor="
            let invitation of vm.invitations;
            trackBy: trackByLatestProject
          "
          [@cardSlideOut]="vm.slideOutActive ? 'on' : 'off'"
          (@cardSlideOut.done)="slideOutAnimationDone($event)"
          [@newProject]="
            vm.newInvitations.includes(invitation.id) ? 'inprogress' : 'idle'
          "
          (@newProject.start)="newProjectAnimationStart($event, invitation)"
          (@newProject.done)="newProjectAnimationDone($event)"
          [@newInvitationSibling]="
            vm.projectSiblingToAnimate.includes(invitation.id)
              ? 'inprogress'
              : 'idle'
          "
          [@reorder]="reorder[invitation.id]"
          (@reorder.done)="reorderDone($event)">
          <tg-project-card
            (projectToDelete)="setProjectToDelete($event)"
            (openModal)="openModal($event)"
            variant="invitation"
            (rejectInvite)="rejectProjectInvite($event)"
            (acceptInvite)="acceptProjectInvite($event.id, $event.name)"
            [hasActions]="true"
            [workspace]="vm.workspace"
            [project]="invitation">
          </tg-project-card>
        </div>
        <ng-container *ngIf="vm.creatingWorkspaceDetail">
          <div
            *ngFor="
              let _ of [].constructor(amountOfProjectsToShow);
              trackBy: trackByIndex
            ">
            <tg-ui-card-skeleton></tg-ui-card-skeleton>
          </div>
        </ng-container>
        <div
          *ngFor="let project of vm.projects; trackBy: trackByLatestProject"
          [@newProject]="
            newProjectsToAnimate.includes(project.id) ? 'inprogress' : 'idle'
          "
          (@newProject.start)="newProjectAnimationStart($event, project)"
          (@newProject.done)="newProjectAnimationDone($event)"
          [@newInvitationSibling]="
            vm.projectSiblingToAnimate.includes(project.id)
              ? 'inprogress'
              : 'idle'
          "
          [@reorder]="reorder[project.id]"
          (@reorder.done)="reorderDone($event)">
          <tg-project-card
            (projectToDelete)="setProjectToDelete($event)"
            (openModal)="openModal($event)"
            [hasActions]="true"
            [project]="project"
            [workspace]="vm.workspace">
          </tg-project-card>
        </div>
      </div>

      <tg-delete-project
        *ngIf="deleteProjectModal"
        [show]="deleteProjectModal"
        (submitDelete)="submitDeleteProject()"
        (closeModal)="deleteProjectModal = false"
        [project]="projectToDelete">
      </tg-delete-project>
    </ng-container>
  </ng-container>
</ng-container>
